<template>
    <div class="app-container">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <el-button type="primary" icon="el-icon-search" @click="TableSearch">搜 索</el-button>
                <el-button @click="Reset" icon="el-icon-delete">重 置</el-button>
            </div>
            <div class="tb-body">
                <el-form ref="searchFormRef" :model="searchForm" :inline="true" label-width="120px" :style="`flex:1;`">
                    <el-form-item label="标题" prop="TitleLike">
                        <el-input v-model.trim="searchForm.TitleLike" placeholder="请输入标题" :clearable="true"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="MobileLike">
                        <el-input v-model.trim="searchForm.MobileLike" placeholder="请输入手机号"
                            :clearable="true"></el-input>
                    </el-form-item>
                    <el-form-item label="座机" prop="TelLike">
                        <el-input v-model.trim="searchForm.TelLike" placeholder="请输入座机" :clearable="true"></el-input>
                    </el-form-item>
                    <el-form-item label="电话号码" prop="PhoneLike">
                        <el-input v-model.trim="searchForm.PhoneLike" placeholder="请输入电话号码"
                            :clearable="true"></el-input>
                    </el-form-item>
                    <el-form-item label="长文本" prop="LongContentLike">
                        <el-input v-model.trim="searchForm.LongContentLike" placeholder="请输入长文本"
                            :clearable="true"></el-input>
                    </el-form-item>
                    <el-form-item label="用户">
                        <el-paged-select url="/User/List" columnName="Name" :clearable="true" columnValue="Id"
                            v-model="searchForm.UserId">
                        </el-paged-select>
                    </el-form-item>
                    <el-form-item label="上架状态">
                        <el-paged-select url="/Select/PutawayStatus" columnName="Name" :clearable="true"
                            columnValue="Value" v-model="searchForm.PutawayStatus">
                        </el-paged-select>
                    </el-form-item>
                    <el-form-item label="开始时间">
                        <el-date-picker v-model="searchForm.BeginTimeRange" type="datetimerange"
                            start-placeholder="开始开始时间" end-placeholder="结束开始时间" :default-time="['00:00:00']"
                            value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间">
                        <el-date-picker v-model="searchForm.EndTimeRange" type="datetimerange"
                            start-placeholder="开始结束时间" end-placeholder="结束结束时间" :default-time="['00:00:00']"
                            value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="激活日期">
                        <el-date-picker v-model="searchForm.ActiveDateRange" type="daterange" start-placeholder="开始激活日期"
                            end-placeholder="结束激活日期" :default-time="['00:00:00']" value-format="yyyy-MM-dd HH:mm:ss ">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="详情内容" prop="ContentLike">
                        <el-input v-model.trim="searchForm.ContentLike" placeholder="请输入详情内容"
                            :clearable="true"></el-input>
                    </el-form-item>
                    <el-form-item label="是否结束">
                        <el-select v-model="searchForm.IsEnd" :clearable="true" placeholder="请选择是否结束">
                            <el-option key="true" label="是" value="true">
                            </el-option>
                            <el-option key="false" label="否" value="false">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="活动时间">
                        <el-date-picker v-model="searchForm.ActivityDateTimeRange" type="datetimerange"
                            start-placeholder="开始活动时间" end-placeholder="结束活动时间" :default-time="['00:00:00']"
                            value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="活动日期">
                        <el-date-picker v-model="searchForm.ActivityDateRange" type="daterange"
                            start-placeholder="开始活动日期" end-placeholder="结束活动日期" :default-time="['00:00:00']"
                            value-format="yyyy-MM-dd HH:mm:ss ">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
            </div>

        </el-card>


        <el-dialog :title="formData.Id ? '修改测试模块' : '添加测试模块'" :visible.sync="editorShow" width="50%" :lock-scroll="true"
            height="800px">
            <el-form v-if="editorShow == true" ref="editModalForm" :rules="editModalFormRules" :model="formData"
                label-width="140px" size="mini">
                <el-row :gutter="10" class="EditFromBody" style="  height: 600px;overflow-y: scroll">
                    <el-col :span="24">
                        <el-form-item label="标题" prop="Title">
                            <el-input type="text" v-model.trim="formData.Title" placeholder="请输入标题"
                                :clearable="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="用户" prop="UserId">
                            <el-paged-select url="/User/List" columnName="Name" columnValue="Id"
                                v-model="formData.UserId">
                            </el-paged-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="上架状态" prop="PutawayStatus">
                            <el-paged-select url="/Select/PutawayStatus" columnName="Name" columnValue="Value"
                                v-model="formData.PutawayStatus">
                            </el-paged-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="图片" prop="ImageUrls">
                            <el-upload-images :limit="1" v-model="formData.ImageUrls"></el-upload-images>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="开始时间" prop="BeginTime">
                            <el-date-picker v-model="formData.BeginTime" align="right" type="datetime"
                                placeholder="选择时间" value-format="yyyy-MM-dd HH:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="结束时间" prop="EndTime">
                            <el-date-picker v-model="formData.EndTime" align="right" type="datetime" placeholder="选择时间"
                                value-format="yyyy-MM-dd HH:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="激活日期" prop="ActiveDate">
                            <el-date-picker v-model="formData.ActiveDate" align="right" type="date" placeholder="选择时间"
                                value-format="yyyy-MM-dd HH:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="活动时间" prop="ActivityDateTimeRange">
                            <el-date-picker v-model="formData.ActivityDateTimeRange" align="right" type="datetimerange"
                                range-separator="-" start-placeholder="开始活动时间" end-placeholder="结束活动时间" placeholder="选择"
                                value-format="yyyy-MM-dd HH:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="活动日期" prop="ActivityDateRange">
                            <el-date-picker v-model="formData.ActivityDateRange" align="right" type="daterange"
                                range-separator="-" start-placeholder="开始活动日期" end-placeholder="结束活动日期" placeholder="选择"
                                value-format="yyyy-MM-dd HH:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="长文本" prop="LongContent">
                            <el-input type="textarea" :rows="3" v-model.trim="formData.LongContent" placeholder="请输入长文本"
                                :clearable="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="是否结束" prop="IsEnd">
                            <el-switch v-model="formData.IsEnd">
                            </el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="手机号" prop="Mobile">
                            <el-input type="text" v-model.trim="formData.Mobile" placeholder="请输入手机号"
                                :clearable="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="座机" prop="Tel">
                            <el-input type="text" v-model.trim="formData.Tel" placeholder="请输入座机"
                                :clearable="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="电话号码" prop="Phone">
                            <el-input type="text" v-model.trim="formData.Phone" placeholder="请输入电话号码"
                                :clearable="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="数量" prop="Qty">
                            <el-input type="number" v-model.trim="formData.Qty" placeholder="请输入数量"
                                :clearable="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="视频" prop="VideoUrl">
                            <el-upload-files :limit="8" v-model="formData.VideoUrl"></el-upload-files>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="详情内容" prop="Content">
                            <el-tinymce v-model="formData.Content" :height="300"></el-tinymce>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row type="flex" justify="end" align="bottom">
                    <el-form-item>
                        <el-button type="primary" plain @click="CreateOrEditForm()">确 定</el-button>
                        <el-button @click="editorShow = false">取 消</el-button>
                    </el-form-item>
                </el-row>
            </el-form>

        </el-dialog>


        <data-table ref="tableId" url="/TestModule/List" :column="dataColum">
            <template v-slot:header>
                <el-button type="primary" plain icon="el-icon-edit" @click="ShowEditModal()">新 增</el-button>
                <el-button type="danger" plain icon="el-icon-delete" @click="ShowBatchDeleteModal()">批 量 删 除</el-button>
                <el-export-button :where="searchForm" exportUrl="/TestModule/Export"></el-export-button>

            </template>
            <template v-slot:operate="scope">
                <el-button type="text" @click="ShowEditModal(scope.row.Id)">修 改</el-button>
                <el-button type="text" @click="ShowDeleteModal(scope.row.Id)">删 除</el-button>
            </template>
        </data-table>
    </div>
</template>

<script>
import store from '@/store';
import { mapGetters } from 'vuex'
export default {
    name: "TestModuleList",
    computed: {
        ...mapGetters([
            'name', 'roleTypeFormat', 'avatar', 'userId', 'loginTimePeriod', "user", 'userId', 'roleType'
        ])
    },
    data() {

        return {
            lock: 0,//用来防止重复提交的变量
            searchForm: {},//搜索定义的数据对象
            dataColum: [
                {
                    key: "Id",
                    hidden: true,

                },
                {
                    key: "Title",
                    title: "标题",
                    width: "150px",
                    type: store.getters.columnType.SHORTTEXT,
                },
                {
                    key: "Qty",
                    title: "数量",
                    width: "150px",
                    type: store.getters.columnType.SHORTTEXT,
                },
                {
                    key: "ImageUrls",
                    title: "图片",
                    type: store.getters.columnType.IMAGES,
                },
                {
                    key: "BeginTime",
                    title: "开始时间",
                    width: "140px",
                    type: store.getters.columnType.DATE,
                },
                {
                    key: "EndTime",
                    title: "结束时间",
                    width: "140px",
                    type: store.getters.columnType.DATE,
                },
                {
                    key: "ActiveDate",
                    title: "激活日期",
                    width: "140px",
                    type: store.getters.columnType.DATE,
                },
                {
                    key: "Content",
                    title: "详情内容",
                    width: "140px",
                    type: store.getters.columnType.RICHTEXT,
                },
                {
                    key: "VideoUrl",
                    title: "视频",
                    width: "140px",
                    type: store.getters.columnType.VIDEO,
                },
                {
                    key: "UserId",
                    hidden: true,
                },
                {
                    key: "UserDto.Name",
                    title: "用户名称",
                    width: "150px",
                    type: store.getters.columnType.SHORTTEXT,
                },
                {
                    key: "PutawayStatusFormat",
                    title: "上架状态",
                    width: "150px",
                    type: store.getters.columnType.SHORTTEXT,
                },
                {
                    key: "IsEnd",
                    title: "是否结束",
                    width: "150px",
                    type: store.getters.columnType.SHORTTEXT,
                },
                {
                    key: "Mobile",
                    title: "手机号",
                    width: "150px",
                    type: store.getters.columnType.SHORTTEXT,
                },
                {
                    key: "Tel",
                    title: "座机",
                    width: "150px",
                    type: store.getters.columnType.SHORTTEXT,
                },
                {
                    key: "Phone",
                    title: "电话号码",
                    width: "150px",
                    type: store.getters.columnType.SHORTTEXT,
                },
                {
                    key: "LongContent",
                    title: "长文本",
                    width: "150px",
                    type: store.getters.columnType.SHORTTEXT,
                },
                {
                    key: "ActivityDateTime",
                    title: "活动时间",
                    width: "350px",
                    type: store.getters.columnType.SHORTTEXT,
                    template: function (item, index) {
                        return `${item.BeginActivityDateTime}至${item.EndActivityDateTime}`
                    }
                },
                {
                    key: "ActivityDate",
                    title: "活动日期",
                    width: "300px",
                    type: store.getters.columnType.SHORTTEXT,
                    template: function (item, index) {
                        return `${item.BeginActivityDate}至${item.EndActivityDate}`
                    }
                },
                {
                    title: "操作",
                    width: "300px",
                    type: store.getters.columnType.USERDEFINED,
                },
            ],
            editModalFormRules: {
                "Title": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],
                "UserId": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],
                "PutawayStatus": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],
                "ImageUrls": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],
                "BeginTime": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],
                "EndTime": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],
                "ActiveDate": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],
                "ActivityDateTimeRange": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],
                "ActivityDateRange": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],
                "LongContent": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],
                "IsEnd": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],
                "Mobile": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            var reg = /^1[34578]\d{9}$/;
                            if (!value || !reg.test(value)) {
                                callback(new Error('请输入正确的手机号'));
                            }
                            else {
                                callback();
                            }
                        }, trigger: 'blur'
                    },
                ],
                "Tel": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],
                "Phone": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],
                "Qty": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],
                "VideoUrl": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],
                "Content": [
                    { required: true, message: '该项为必填项', trigger: 'blur' },
                ],
            },
            formData: {

            },//保存或者修改定义的数据对象
            editorShow: false,

        };
    },
    created() {

    },
    methods: {
        //修改属性
        async UpdateEntityAsync(Id, title, data) {
            let { Data } = await this.$PostSigleUpdate(`/TestModule/Get`, `/TestModule/CreateOrEdit`, Id, title, data);

            this.$refs.tableId.reload();
        },
        /**
         * 点击新增或者编辑的时候会触发
         */
        async ShowEditModal(Id) {

            let { Data } = await this.$Post(`/TestModule/Get`, { Id: Id });
            if (Data.BeginActivityDateTime && Data.EndActivityDateTime) {
                Data.ActivityDateTimeRange = [Data.BeginActivityDateTime, Data.EndActivityDateTime];
            }
            if (Data.BeginActivityDate && Data.EndActivityDate) {
                Data.ActivityDateRange = [Data.BeginActivityDate, Data.EndActivityDate];
            }
            this.formData = Data;
            this.formData.Behavior = null;
            this.formData.IsEdit = Id != undefined;

            this.editorShow = true;

        },
        /**
         * 点击保存的时候会触发
         */
        async CreateOrEditForm() {
            if (this.lock == 1) return;
            this.$refs.editModalForm.validate(async valid => {
                if (valid) {
                    this.lock = 1;
                    this.formData.BeginActivityDateTime = this.formData.ActivityDateTimeRange[0];
                    this.formData.EndActivityDateTime = this.formData.ActivityDateTimeRange[1];
                    this.formData.BeginActivityDate = this.formData.ActivityDateRange[0];
                    this.formData.EndActivityDate = this.formData.ActivityDateRange[1];
                    var { Success } = await this.$PostLoading(`/TestModule/CreateOrEdit`, this.formData);
                    this.lock = 0;
                    if (Success) {
                        this.editorShow = false;
                        this.$refs.tableId.reload(this.searchForm);
                    }
                }
            })
        },
        /**
         * 单个删除的时候会触发
         */
        async ShowDeleteModal(Id) {
            await this.$PostDelete(`/TestModule/Delete`, { Id: Id });
            this.$refs.tableId.reload(this.searchForm);
        },
        /**
         * 批量删除的时候会触发
         */
        async ShowBatchDeleteModal() {
            var ids = this.$refs.tableId.GetSelectionRow().map(x => x.Id);
            await this.$PostDelete(`/TestModule/BatchDelete`, { Ids: ids });
            this.$refs.tableId.reload(this.searchForm);
        },
        /**
         * 点击表格搜索按钮会触发
         */
        async TableSearch() {
            this.$refs.tableId.reload(this.searchForm);
        },
        /**
         * 点击清空表单会触发
         */
        async Reset() {
            this.searchForm = {};
            this.$refs.tableId.reload(this.searchForm);
        },




    },
};
</script>